<template>
    <div id="emap">
        <div id="entermap" class="entermap" >
        </div>
        <!--<enter-traffic ref="enter-traffic"></enter-traffic>-->
        <div class="traffic-enter">
            <div id="payment">
                <fieldset>
                    <legend>录入交通管制</legend>
                    <ol>
                        <li>
                            <label>描述信息：</label>
                            <input v-model="rmsg" placeholder="描述信息">
                        </li>
                        <li>
                            <label>管制名称：</label>
                            <input v-model="rtitle" placeholder="管制名称">
                        </li>
                        <li>
                            <label style="text-align:center">管制道路：</label>
                            <textarea v-model="rlatlon" placeholder="add multiple lines"></textarea>
                        </li>
                        <li>
                            <button v-on:click="addNopassRoad">添加交通管制</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button v-on:click="registryNopassRoad">录入交通管制</button></br>
                        </li>

                        <li>
                            <label>生效时间：</label>
                            <input placeholder="请输入日期" ref="rstime" id="demo" class="laydate-icon" onclick="laydate({istime: false,isclear:false,issure:false,istoday:false, format: 'YYYY-MM-DD',start: laydate.now(0, 'YYYY-MM-DD hh:mm:ss')})">
                        </li>
                        <li>
                            <label>失效时间：</label>
                            <input placeholder="请输入日期" ref="retime" class="laydate-icon" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss',start: laydate.now(0, 'YYYY-MM-DD hh:mm:ss')})">
                        </li>
                        <li>
                            <label>路段描述：</label>
                            <textarea v-model="rdes" placeholder="add multiple lines"></textarea>
                        </li>
                        <li>
                            <label>绕行建议：</label>
                            <textarea v-model="rsugg" placeholder="add multiple lines"></textarea>
                        </li>
                    </ol>
                </fieldset>
                <fieldset>
                    <button v-on:click="submitRoad">提交</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button v-on:click="goback">返回</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button v-on:click="clear">清空</button>
                </fieldset>
            </div>
        </div>
    </div>

</template>
<script>





    var noPassArray = [];
    var mapStatus = 0;
    var source_data = {
        "type": "FeatureCollection",
        "features": []
    }
    var nopassPoint_geojson = {
        "type": "Feature",
        "properties": {
            "title": "道路管制路线点集",
            "type": "nopass_road",
        },
        "geometry": {
            "type": "Point",
            "coordinates": []
        }
    }
    var nopassRoad_geojson = {
        "type": "Feature",
        "properties": {
            "title": "道路管制路线",
            "type": "nopass_road",
        },
        "geometry": {
            "type": "LineString",
            "coordinates": []
        }
    }

    import * as globals from '../global'
    import env from '../global/env'
 /*   import EnterTraffic from './EnterTra/!**!/ffic'*/
    import * as configs from '../config'
    import {mapGetters} from 'vuex'


    export default{
        name: 'EnterMap',
        data(){
            return {
                rlatlon:''

            }

        },
        components:{
            /*EnterTraffic*/
        },
        methods: {
            switchBackBtn(src){
                this.switchBackBtnSrc = src;
            },
            switchBackBtnClick(){
                this.$emit('hide-enter-map');
            },
            addNopassRoad:function(){
                mapStatus = 1;
                noPassArray.length = 0;
            }
            ,
            registryNopassRoad:function(){
                mapStatus = 0
                env.map.removeLayer("chosedPointLine_layer")
                /*addAndDisplayNopassRoad()*/
                noPassArray.map(function (lnglat) {
                    nopassPoint_geojson.geometry.coordinates = lnglat
                    source_data.features.push($.extend(true, {},nopassPoint_geojson))
                })
                nopassRoad_geojson.geometry.coordinates = noPassArray
                source_data.features.push($.extend(true, {}, nopassRoad_geojson))
                this.createPointList(noPassArray);
                noPassArray.length=0
                if (!env.map.getSource("pointSource")) {
                    env.map.addSource("pointSource", {
                        "type": "geojson",
                        "data": source_data
                    });
                }
                if (!env.map.getLayer("pointSource")) {
                    env.map.addLayer({
                        "id": "nopass_road",
                        "type": "line",
                        "source": "pointSource",
                        "layout": {
                            "line-join": "round",
                            "line-cap": "round"
                        },
                        "paint": {
                            "line-color": "#ff0000",
                            "line-width": 6
                        },
                        filter: ['in', 'type', 'nopass_road']
                    });
                }
                env.map.getSource("pointSource").setData(source_data)
            },
            displayChosedRoadLine(points){
                var datas = {
                    "type": "FeatureCollection",
                    "features": [
                        {
                            "type": "Feature",
                            "properties": {
                                "title": "录入管制",
                                "type": "nopass_road",
                            },
                            "geometry": {
                                "type": "LineString",
                                "coordinates": points
                            }
                        }
                    ]
                }
                if (!env.map.getSource("chosedPointLine_source")) {
                    env.map.addSource("chosedPointLine_source", {
                        "type": "geojson",
                        "data": datas
                    });
                }
                if (!env.map.getLayer("chosedPointLine_layer")) {
                    env.map.addLayer({
                        "id": "chosedPointLine_layer",
                        "type": "line",
                        "source": "chosedPointLine_source",
                        "layout": {
                            "line-join": "round",
                            "line-cap": "round"
                        },
                        "paint": {
                            "line-color": "#333333",
                            "line-width": 6
                        },
                    });
                }
                env.map.getSource("chosedPointLine_source").setData(datas)
            },
            createPointList(list){
                var listStr = "["
                list.map(function (lnglat) {
                    listStr+=`[${lnglat}],`
                })
                listStr = listStr.substr(0,listStr.length-1)
                listStr+=("]")
                this.rlatlon = listStr;
                console.log('交通管制点集：'+listStr);
            },
            submitRoad:function() {
                /*var datar = {
                    "descrip_info": this.rmsg,
                    "control_type" : "linestring",
                    "title" : this.rtitle,
                    "geometry" : {
                        "type" : "LineString",
                        "coordinates" : this.rlatlon
                    },
                    "start_time" : this.rstime,
                    "end_time" : this.retime,
                    "road_descrip" : this.rdes,
                    "detour_suggest" : this.rsugg
                };*/

                var date = new Date().toString()
                var datar = "{'descrip_info':'"+this.rmsg+ "','control_type':'linestring','title':'"+this.rtitle+"'," + "'geometry':{'type':'LineString','coordinates':"+this.rlatlon+ "},'start_time':'"+this.$refs.rstime.value+ "','end_time':'"+this.$refs.retime.value+"'," +
                        "'road_descrip':'"+this.rdes + "','detour_suggest':'"+this.rsugg +"'}";
                console.log(datar);
                /* this.$http.post(`${'http://192.168.100.17:8080/baotou_traffic/service/insertTrafficControl?jsonData='+datar}?${date}`).then((response) => {

                console.log("<<<<-----getWeatherForecast------<<<<<<");

            }, (response) => {
                    console.log(response.json());
                });
            }*/
                if(confirm("是否提交管制信息")){
                    $.post('http://192.168.100.17:8080/baotou_traffic/service/insertTrafficControl',{jsonData: datar}, function (data){
                        console.log('执行成功');
                        console.log(data);
                        alert(data.message);

                    });
                }


            },
            clear:function(){
                this.rmsg = '';
                this.rtitle = '';
                this.rlatlon = '';
                this.$refs.rstime.value = '';
                this.$refs.retime.value = '';
                this.rdes = '';
                this.rsugg = '';

            },
            goback:function(){
                this.$emit('hide-enter-map');
                this.clear();
            }


        },

        mounted(){
            minemap.accessToken = globals.MAP_ACCESS_TOKEN;
            minemap.solution = globals.MAP_SOLUTION;
            var map = new minemap.Map({
                container: 'entermap',
                style: "http://minedata.cn/minemapapi/baotou/poidisplay.json",
                center: [109.899842, 40.635018],
                zoom: 11,
                pitch: 0,
                maxZoom: 17
            });
            env.map = map;
            env.map.on('click', (e) => {
                var lngLat = e.lngLat;
                if (mapStatus == 1) {
                    noPassArray.push([lngLat.lng, lngLat.lat]);
                    /*document.getElementById("nopassLineList").innerHTML=createPointList(noPassArray);*/
                    this.displayChosedRoadLine(noPassArray);
                }
            });
            map.resize()


        },
        computed: {},
        destroyed () {
            clearInterval(this.interval);
        }

    }

</script>
<style scope>
    .entermap {
        z-index: 50;
        background-color: #f3f3f3;
        position: fixed;
       /* width:100%;
        height:100%;*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        /*text-align: center;*/
    }

    #emap {
        position:fixed;
        width:100%;
        height:100%;
        z-index:59;
    }
    .traffic-enter{
        /*width:280px;*/
        position:fixed;

        z-index:51;
        /*reight:20px;*/
        left:5px;
    }

    #payment ol li {
        list-style-type:none;
        background: #b9cf6a;
        background: rgba(255, 255, 255, .3);
        line-height: 15px;
        padding: 5px 10px;
        margin-bottom: 2px;
    }


    #payment input:not([type=radio]), #payment textarea {
        background: #ffffff;
        border: #FC3 solid 1px;
        -webkit-border-radius: 3px;
        font: italic 13px Georgia, "Times New Roman", Times, serif;
        outline: none;
        padding: 5px;
        width: 200px;
    }



</style>